<template>
  <div class="setClass">
    <el-card class="box-card">
      <div class="card-header">
        <span>课程详情</span>
        <el-button class="button" type="text" @click="addClass()"
          >增加课程</el-button
        >
      </div>
      <el-table :data="classTable">
        <el-table-column prop="classname" label="课程名"> </el-table-column>
        <el-table-column prop="classteacher" label="任课老师">
        </el-table-column>
        <el-table-column prop="alevel" label="评级A"> </el-table-column>
        <el-table-column prop="blevel" label="评级B"> </el-table-column>
        <el-table-column prop="clevel" label="评级C"> </el-table-column>
        <el-table-column prop="dlevel" label="评级D"> </el-table-column>
        <el-table-column prop="classid">
          <template v-slot="scope">
            <el-button @click="update(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="修改课程信息" v-model="dialogVisible">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="updateForm"
      >
        <el-form-item label="课程名称">
          <el-input v-model="updateForm.classname"></el-input>
        </el-form-item>
        <el-form-item label="任课老师">
          <el-input v-model="updateForm.classteacher"></el-input>
        </el-form-item>
        <el-form-item label="评级A">
          <el-input v-model="updateForm.alevel" type="number"></el-input>
        </el-form-item>
        <el-form-item label="评级B">
          <el-input v-model="updateForm.blevel" type="number"></el-input>
        </el-form-item>
        <el-form-item label="评级C">
          <el-input v-model="updateForm.clevel" type="number"></el-input>
        </el-form-item>
        <el-form-item label="评级D">
          <el-input v-model="updateForm.dlevel" type="number"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitUpdate">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加课程" v-model="addDialogVisible">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="updateForm"
      >
        <el-form-item label="课程名称">
          <el-input v-model="updateForm.classname"></el-input>
        </el-form-item>
        <el-form-item label="任课老师">
          <el-input v-model="updateForm.classteacher"></el-input>
        </el-form-item>
        <el-form-item label="评级A">
          <el-input v-model="updateForm.alevel" type="number"></el-input>
        </el-form-item>
        <el-form-item label="评级B">
          <el-input v-model="updateForm.blevel" type="number"></el-input>
        </el-form-item>
        <el-form-item label="评级C">
          <el-input v-model="updateForm.clevel" type="number"></el-input>
        </el-form-item>
        <el-form-item label="评级D">
          <el-input v-model="updateForm.dlevel" type="number"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitAdd">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import { path } from "../../config.json";
import { ElMessage } from "element-plus";
export default {
  name: "SetClass",
  data() {
    return {
      options: [
        {
          value: "2018下",
          label: "2018下",
        },
        {
          value: "2019上",
          label: "2019上",
        },
        {
          value: "2019下",
          label: "2019下",
        },
        {
          value: "2020上",
          label: "2020上",
        },
        {
          value: "2020下",
          label: "2020下",
        },
      ],
      value: "2018下",
      classTable: [],
      updateForm: {
        classid: 0,
        classname: "",
        classteacher: "",
        alevel: "",
        blevel: "",
        clevel: "",
        dlevel: "",
      },
      dialogVisible: false,
      addDialogVisible: false,
    };
  },
  methods: {
    update(row) {
      this.updateForm = row;
      this.dialogVisible = true;
    },
    submitUpdate() {
      axios({
        headers: {
          token: sessionStorage.getItem("token"), //此处放置请求到的用户token
        },
        method: "post",
        url: path + "/classTable/updateClassTable",
        data: {
          classid: this.updateForm.classid,
          classname: this.updateForm.classname,
          classteacher: this.updateForm.classteacher,
          alevel: this.updateForm.alevel,
          blevel: this.updateForm.blevel,
          clevel: this.updateForm.clevel,
          dlevel: this.updateForm.dlevel,
        },
      }).then((res) => {
        let i = res.data;
        if (i == 1) {
          this.dialogVisible = false;
          ElMessage.success({
            message: "修改成功",
            type: "success",
          });
        } else {
          ElMessage.error("修改失败，请重试！");
        }
      });
    },
    addClass() {
      this.addDialogVisible = true;
      this.updateForm = {
        classid: 0,
        classname: "",
        classteacher: "",
        alevel: 90,
        blevel: 80,
        clevel: 70,
        dlevel: 60,
      };
    },
    submitAdd() {
      axios({
        headers: {
          token: sessionStorage.getItem("token"), //此处放置请求到的用户token
        },
        method: "post",
        url: path + "/classTable/insertClassTable",
        data: {
          classname: this.updateForm.classname,
          classteacher: this.updateForm.classteacher,
          alevel: this.updateForm.alevel,
          blevel: this.updateForm.blevel,
          clevel: this.updateForm.clevel,
          dlevel: this.updateForm.dlevel,
        },
      }).then((res) => {
        let i = res.data;
        if (i == 1) {
          this.addDialogVisible = false;
          ElMessage.success({
            message: "添加成功",
            type: "success",
          });
        } else {
          ElMessage.error("修改失败，请重试！");
        }
      });
    },
  },
  mounted() {
    axios({
      headers: {
        token: sessionStorage.getItem("token"), //此处放置请求到的用户token
      },
      method: "post",
      url: path + "/classTable/findAllClassTable",
      data: {},
    }).then((response) => {
      this.classTable = response.data;
    });
  },
};
</script>
<style scoped>
.button {
  float: right;
}
.box-card {
  height: 90vh;
}
</style>